<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>物资批量领用</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.divcol {
				/* position: fixed; */
				bottom: 0;
				height: 35%;
				width: 90%;
				text-align: center;
			}
		</style>

	</head>
	<body>

		<div id="app">
			<el-row :gutter="15">
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
					<el-col :span="24">
						<el-form-item label="申请人" prop="sysusername">
							<el-input v-model="formData.sysusername" placeholder="请输入申请人" readonly clearable
								:style="{width: '100%'}">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="申请时间" prop="applicationtime">
							<el-input v-model="formData.applicationtime" placeholder="申请时间" readonly clearable
								:style="{width: '100%'}"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="添加领用物资" prop="waser">
							<el-button type="text" icon="el-icon-circle-plus" size="medium" @click="derFormble=true">
								添加领用物资 </el-button>
						</el-form-item>
					</el-col>


					<!-- 添加的物资信息 -->

					<el-table size="big" :data="tableData1" border style="width: 100%">
						<el-table-column align="center" prop="codematerial" label="物资编码" width="200">
						</el-table-column>
						<el-table-column align="center" prop="materialname" label="物资名称" width="150">
						</el-table-column>


						<el-table-column align="center" prop="content" label="领用物资数量" width="180">
							<template slot-scope="scope">
								<el-input v-model="scope.row.content" size="mini"></el-input>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="quantity" label="在库物资数量" width="180">
						</el-table-column>
						<el-table-column align="center" prop="remark" label="备注">
						</el-table-column>
						<el-table-column align="center" label="操作" width="140">
							<template slot-scope="scope">
								<el-button size="mini" type="danger"
									@click="dellication(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<div class="divcol">
						<el-col :span="24">
							<el-form-item size="large">
								<el-button type="primary" @click="submitForm">提交</el-button>
								<el-button @click="resetForm">重置</el-button>
							</el-form-item>
						</el-col>
					</div>
				</el-form>
			</el-row>




			<!-- 所有物资查询开始 -->
			<el-dialog title="申请物资" :visible.sync="derFormble" width="50%">
				<el-table size="mini" :data="tableData" border style="width: 100%">
					<el-table-column prop="codematerial" label="物资编码" width="120">
					</el-table-column>
					<el-table-column prop="materialname" label="物资名称" width="180">
					</el-table-column>
					<el-table-column prop="quantity" label="在库物资数量">
					</el-table-column>
					<el-table-column prop="remark" label="备注">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">

							<el-button size="mini" type="danger"
								@click="application(scope.$index, scope.row)">添加</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</el-dialog>
			<!-- 所有物资查询结束 -->





		</div>

		<script>
			var vue = new Vue({
				el: "#app",
				components: {},
				props: [],
				data: {
					// newobj: [], //领用物资信息提交
					content: 0, //领用的物资数量
					tableData: [], //所有的物资信息
					tableData1: [], //添加的物资信息
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5, //每页条数
					derFormble: false,
					formData: {
						id: "",

						sysusername: undefined,
						applicationtime: undefined,
						waser: undefined,
					},
					rules: {

						sysusername: [{
							required: true,
							message: '请输入申请人',
							trigger: 'blur'
						}],
						applicationtime: [{
							required: true,
							message: '申请时间',
							trigger: 'blur'
						}],

					},

				},
				computed: {},
				watch: {},
				created() {},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()

				},
				methods: {
					fa(a) {
						return a
					},
					submitForm() {
						this.$refs['elForm'].validate(valid => {

							//alert(JSON.stringify(this.tableData1));

							if (!valid) return
							// TODO 提交表单
							this.derFormble = false
							//alert(JSON.stringify(this.tableData1));
							var that = this
							//添加到申请表中
							axios.post("http://192.168.178.46:8080/der/batAddDer", this.tableData1).then(
								function(
									res) {
									if (res.data.code == 200) {
										//申请
										that.$message('申请已提交')
									}

								}).catch(err => {
								console.log(err)
							});
						})
					},
					//添加的物资信息
					application(index, row) {
						// let newobj = this.tableData[index]
						let newobj = {
							...row
						}

						//alert(JSON.stringify(this.formData.content));
						/* if (parseInt(newobj.content) > parseInt(row.quantity)) {
							alert("在库物资数量不足!")
						} else {
						} */
						newobj.applicationtime = this.formData.applicationtime
						newobj.status = 2
						newobj.deruserid = this.formData.id

						this.$set(newobj, "content", 0) //领用的物资数量

						this.tableData1.push(newobj)
						//alert(JSON.stringify(this.tableData1));
					},
					//删除需要添加的物资信息
					dellication(index, row) {
						this.tableData1.splice(index, 1);
						alert.success('删除成功！');

					},
					//查询
					initdata() {
						var that = this
						//获取在库物资数据
						axios.get(HTTP + "material/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});


						axios.post(HTTP + "user/user").then(function(res) {
							//alert(JSON.stringify(res));
							that.formData = res.data.data.byId
							let datePicker = document.getElementById("myDatePicker");
							let currentDate = new Date();
							that.formData.applicationtime = currentDate.toISOString().split("T")[0];
						}).catch(err => {
							console.log(err)
						});

					},
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					},

				}
			})
		</script>

	</body>
</html>